<template>
	<view class="page-container">
		<view class="table-view-group">
			<view class="table-cell-bar">
				<view class="table-cell-block">
					<view class="table-cell-block__hd">原密码</view>
					<view class="table-cell-block__bd">
						<input class="item-input" type="text" v-model="oldPassword" :password="isPassword1" placeholder="请输入(至少六位)" />
					</view>
					<view class="table-cell-block__fd" :hidden="!oldPassword">
						<text class="iconfont control-show-icon" :style="{color:isPasswordColor1}" @click="switchHidden(1)">&#xe62b;</text>
						<text class="iconfont control-clear-icon" @click="reset(1)">&#xe688;</text>
					</view>
				</view>
			</view>
			<view class="table-cell-bar">
				<view class="table-cell-block">
					<view class="table-cell-block__hd">新密码</view>
					<view class="table-cell-block__bd">
						<input class="item-input" type="text" v-model="newPassword" :password="isPassword2" placeholder="请输入(至少六位)" />
					</view>
					<view class="table-cell-block__fd" :hidden="!newPassword">
						<text class="iconfont control-show-icon" :style="{color:isPasswordColor2}" @click="switchHidden(2)">&#xe62b;</text>
						<text class="iconfont control-clear-icon" @click="reset(2)">&#xe688;</text>
					</view>
				</view>
			</view>
			<view class="table-cell-bar">
				<view class="table-cell-block">
					<view class="table-cell-block__hd">确认密码</view>
					<view class="table-cell-block__bd">
						<input class="item-input" type="text" v-model="confirmPassword"  :password="isPassword3" placeholder="请输入(至少六位)" />
					</view>
					<view class="table-cell-block__fd" :hidden="!confirmPassword">
						<text class="iconfont control-show-icon" :style="{color:isPasswordColor3}" @click="switchHidden(3)">&#xe62b;</text>
						<text class="iconfont control-clear-icon" @click="reset(3)">&#xe688;</text>
					</view>
				</view>
			</view>
		</view>
		<view type="default" class="save-btn-block" :class="checkIsPassword ? '' : 'disabled'" :disabled="!checkIsPassword" @click="save">保存</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				oldPassword: '',
				newPassword: '',
				confirmPassword: '',
				isPassword1: true,
				isPassword2: true,
				isPassword3: true,
				isPasswordColor1: '#333',
				isPasswordColor2: '#333',
				isPasswordColor3: '#333',
			}
		},
		computed: {
			checkIsPassword(){
				return this.oldPassword && this.newPassword && this.confirmPassword
			}
		},
		methods: {
			//清空输入框
			reset(index){
				switch(index){
					case 1:this.oldPassword = '';break;
					case 2:this.newPassword = '';break;
					case 3:this.confirmPassword = '';break;
					default:
				}
			},
			//切换可见性
			switchHidden(index){
				switch(index){
					case 1:
					this.isPasswordColor1 = this.isPassword1?'#ce2424':'#333';
					this.isPassword1 = (this.isPassword1?false:true);
					break;
					case 2:
					this.isPasswordColor2 = this.isPassword2?'#ce2424':'#333';
					this.isPassword2 = (this.isPassword2?false:true);
					break;
					case 3:
					this.isPasswordColor3 = this.isPassword3?'#ce2424':'#333';
					this.isPassword3 = (this.isPassword3?false:true);
					break;
					default:
				}
			},
			//保存密码
			async save(){
				if( this.newPassword == this.oldPassword ){
					return uni.showToast({
						title: '新密码和旧密码不能相同',
						icon: 'none'
					});
				}
				if( this.newPassword != this.confirmPassword ){
					return uni.showToast({
						title: '新密码前后不一致',
						icon: 'none'
					});
				}
				if( this.newPassword.length < 6 ){
					return uni.showToast({
						title: '新密码不得小于6位',
						icon: 'none'
					});
				}
				let params = {
					method:'api/v2/member/info/reset_password',
					old_pwd:this.oldPassword,
					pwd: this.newPassword
				}
				let res = await this.$http(params)
				if( res.status ){
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					});
					setTimeout(()=>{
						uni.navigateBack({})
					}, 1500)
				}else{
					uni.showToast({
						title: res.msg,
						icon:'none'
					});
				}
			},
		}
	}
</script>

<style lang="scss">
	.page-container{
		padding: 24rpx;
	}
	.table-view-group{
		margin-bottom: 20rpx;
		border-radius: $uni-border-radius-lg;
		background-color: $uni-bg-color;
	}
	.table-cell-bar{
		padding: 0 20rpx;
		position: relative;
		&:after{
			content: "";
			position: absolute;
			right: 20rpx;
			left: 20rpx;
			bottom: 0;
			height: 1px;
			-webkit-transform: scaleY(0.5);
			transform: scaleY(0.5);
			background-color: $uni-border-color;
		}
		&:last-child:after{
			display: none;
		}
	}
	.table-cell-block{
		display: flex;
		align-items: center;
		padding: 24rpx 0;
		&__hd{
			width: 180rpx;
			height: 48rpx;
			line-height: 48rpx;
			font-size: $uni-font-size-base;
		}
		&__bd{
			flex: 1 1 auto;
		}
		&__fd{
			height: 48rpx;
			line-height: 48rpx;
			flex: 0 0 auto;
			.iconfont{
				display: inline-block;
				vertical-align: top;
				margin-left: 12rpx;
			}
		}
	}
	.save-btn-block{
		color: $uni-text-color-inverse;
		padding: 20rpx 0;
		text-align: center;
		margin-top: 40rpx;
		font-size: $uni-font-size-lg;
		border-radius: $uni-border-radius-lg;
		background-color: $uni-bg-color-primary;
		&:after{
			display: none;
		}
		&.disabled{
			color: $uni-text-color-inverse;
			background-color: #bdefd6;
		}
	}
	.item-input{
		height: 48rpx;
		line-height: 48rpx;
		margin-right: 30rpx;
		font-size: $uni-font-size-base;
	}
</style>
